<template>
  <div>
    <!-- 活动 -->
    <div
      v-if="ACTIVITYFLOORSTATUS === 1"
      id="Fresh"
    >
      <SecondsKill
        :secondskilldata="activityList"
        @TabStatus="TabStatus"
      />
      <div
        v-for="it in activityList"
        :key="it.id"
        class="bigbox"
      >
        <div
          v-if="it.type !== 1 && it.type !== 9"
          class="title_or_time_box"
        >
          <div class="title">
            {{ it.sName||it.pName||it.name }}
            <!-- {{ it.type }} -->
          </div>
        </div>
        <div
          v-if="it.type !== 1 && it.type !== 9"
          class="top-other"
        >
          <el-carousel
            :interval="5000"
            arrow="always"
            height="29.5rem"
            indicator-position="none"
          >
            <el-carousel-item
              v-for="items in it.count"
              :key="items"
            >
              <div
                v-for="(item, str) in it.SmallList"
                :key="str"
                class="goods-item"
                @click="goDetail(item, it.type)"
              >
                <div
                  v-if="str >= (items - 1) * 4 && str < items * 4"
                  style="margin: 0 auto; text-align: center;"
                >
                  <img
                    :src="item.defaultAlbum"
                    alt=""
                    class="goods-img"
                  >
                  <div class="goods-info">
                    <p class="name">
                      {{ item.cProductShowName }}
                    </p>
                    <p class="price">
                      ￥ {{ item.fSalePrice }}
                    </p>
                    <p
                      v-if="it.type == 3"
                      class="promotion"
                    >
                      买赠
                    </p>
                    <p
                      v-if="it.type == 6"
                      class="promotion"
                    >
                      套餐
                    </p>
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
          <div class="more">
            <img
              src="../../assets/img/logo2.png"
              alt=""
              @click="toList(shopid, it.type, it.id)"
            >
          </div>
        </div>
      </div>
    </div>
    <!-- 活动END -->
    <!--秒杀列表-->
    <div v-else-if="ACTIVITYFLOORSTATUS === 2">
      <div id="ActivtyList">
        <div class="list_body">
          <div class="floor_box_img">
            <img :src="banner">
            <div class="top_box">
              <div class="top_tab_box">
                <div
                  v-for="time in timeList"
                  :key="time.id"
                  class="top_tab_box_item"
                  :class="time.pStartDate==currentTime? 'itemactive' : ''"
                  @click="TabActiveTme(time)"
                >
                  <span>{{ time.pStartDate }}:00</span>
                  <span>{{ time.status }}</span>


                  <div class="triangle_box">
                    <div class="triangle_box_item">
                      <div
                        class="triangle_item"
                        :class="time.pStartDate==currentTime? 'triangleactive' : ''"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="list_box">
              <div
                v-for="(i, l) in currentItem.goodsList"
                :key="l"
                class="list_box_item"
                
                @click="SnappedImmediately(i)"
              >
                <div>
                  <div
                    class="list_box_list"
                    :class="!go?'nodrop':''"
                  >
                    <img
                      :src="i.defaultAlbum"
                      alt=""
                      class="goods-img"
                    >
                    <div class="goods_info_box">
                      <p class="goods_info_title">
                        {{ i.cProductShowName }}
                      </p>
                      <div class="goods_info_inventory">
                        <div class="inventory">
                          <div
                            class="active"
                            :style="{width: `${(i.lInventoryCount / (i.lInventoryCount+i.iSales)*100).toFixed(2)}%`}"
                          />
                        </div>
                        <div class="right">
                          还剩{{ i.lInventoryCount }}件
                        </div>
                      </div>
                      <p class="goods_info_price">
                        <span>限时购</span> ￥ {{ i.fSalePrice }} <span class="yj">￥
                          {{ i.pfMarkPrice }}</span>
                        <!-- 仅剩{{i.lInventoryCount}} -->
                      </p>
                      <p class="goods_info_buttons">
                        <span
                          :class="!go?'gray':''"
                          @click.stop="SnappedImmediately(i)"
                        >立即抢购</span>
                      </p>
                      <!-- <p
                        class="goods_info_buttons_un"
                      >
                        <span @click.stop="SnappedImmediatelyUN">立即抢购</span>
                      </p> -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--秒杀列表END-->
    <!-- 所有模块更多列表 -->
    <div v-else-if="ACTIVITYFLOORSTATUS === 3">
      <div id="OtherActive">
        <div class="top_box">
          <div class="sortList">
            <div>排序:</div>
            <div
              v-for="item in areaData"
              :key="item.id"
              :class="item.isSelected ? 'active' : ''"
              @click="checkArea(item)"
            >
              {{ item.title }}
              <div
                v-if="item.title === '价格' && item.isSelected "
                class="areaIconbox"
              >
                <i
                  v-if="item.sorting === 1"
                  class="el-icon-top"
                />
                <i
                  v-if="item.sorting === 2"
                  class="el-icon-bottom"
                />
              </div>
            </div>
          </div>
          <div class="search">
            <input
              v-model="keywords"
              type="text"
              placeholder="搜索你想要的商品"
              @keyup.13="searchThis"
            >
            <img
              src="../../assets/img/SS@2x.png"
              alt=""
              @click="searchThis"
            >
          </div>
        </div>
        <!-- 非团购列表 -->
        <div
          v-if="ACTIVE_STATUS === 0"
          class="goods-list"
        >
          <div
            v-for="(item,index) in ActiveMoreList"
            :key="index"
            class="goods-item"
            @click.stop="goDetail(item, ACTIVETYPE)"
          >
            <div class="goods-img">
              <img
                :src="item.defaultAlbum"
                alt=""
              >
            </div>
            <div class="goods-info">
              <div class="goods-info-left">
                <div class="name">
                  {{ item.cProductShowName }}
                </div>
                <div class="price_box">
                  <div class="price">
                    ￥{{ item.fSalePrice }}
                  </div>
                  <div class="text">
                    已有{{ item.iSales }}人付款
                  </div>
                </div>
              </div>
              <div class="goods-info-right">
                <img
                  class="item_img"
                  :src="item.FocusStatus? guanzhu : notguanzhu"
                  @click.stop="focus(item)"
                >
              </div>
            </div>
          </div>
        </div>
        <!-- 非团购列表END -->
        <!-- 团购列表 -->
        <div
          v-if="ACTIVE_STATUS === 1"
          class="goods-list"
        >
          <div
            v-for="(item,index) in ActiveMoreList"
            :key="index"
            class="goods-item_2"
          >
            <div
              class="goods-img_2"
              @click.stop="goDetail(item, ACTIVETYPE)"
            >
              <img
                :src="item.defaultAlbum"
                alt=""
              >
            </div>
            <div
              class="tip_box"
              :style="{'backgroundImage':'url('+ imgSrc +')',backgroundPosition:'center',backgroundRepeat: 'no-repeat',backgroundSize: '100% 100%'}"
            >
              <div class="tip_body">
                <div class="letf">
                  <span>{{ item.GroupBuying.groupBuying.name }}</span>
                  <span>￥{{ item.GroupBuying.groupBuying.price }}起</span>
                </div>
                <div class="right">
                  <span>仅限购{{ item.GroupBuying.groupBuying.totalLimitQuantity }}件 剩余:
                    {{ NowData(item.GroupBuying.groupBuying.now) - endTimeData(item.GroupBuying.groupBuying.endTime) }}小时</span>
                </div>
              </div>
            </div>
            <div class="goods-info">
              <div class="goods-info-left">
                <div class="name">
                  {{ item.cProductShowName }}
                </div>
                <div class="price_box">
                  <div class="price">
                    ￥{{ item.fMarkPrice }}
                  </div>
                  <div class="text">
                    已有{{ item.iSales }}人付款
                  </div>
                </div>
              </div>
              <div class="goods-info-right">
                <img
                  class="item_img"
                  :src="item.FocusStatus? guanzhu : notguanzhu"
                  @click.stop="focus(item)"
                >
              </div>
            </div>
          </div>
        </div>
        <!-- 团购列表END -->
        <div class="pagination_box">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="totalPage"
            :current-page.sync="pageIndex"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <!-- 所有模块更多列表END -->
  </div>
</template>

<script>
	import guanzhu from '../../assets/img/zan_selected.png'
	import notguanzhu from '../../assets/img/zan.png'
	import SecondsKill from './SecondsKill.vue' // 秒杀
	export default {
		name: "",
		components: {
			SecondsKill, // 秒杀 
		},
		filters: {
			ExtractHours(times) {
				// 提取结束时间中的小时
				let timearr = times.replace(" ", ":").replace(/\:/g, "-").split("-");
				let timestr = timearr[3]
				return timestr
			}
		},
		props: {
			shopid: {
				type: String,
				default: ""
			},
		},
		data() {
			return {
				imgSrc: require('../../assets/img/tbj_03.png'),
				notguanzhu: notguanzhu,
				guanzhu: guanzhu,
				Active: 1,
				TriangleActive: 1,
				ActiveList: [], // 活动列表
				OtherActiveList: [], // 其他活动列表
				activityList: [],
				ACTIVITYFLOORSTATUS: 1, // 更多状态,1 为活动列表 2为秒杀列表
				SystemData: 0,
				TabActiveHoursData: 10,
				areaData: [{
						title: "默认",
						isSelected: true,
						id: 0,
						value: "iOrder",
					},
					{
						title: "价格",
						isSelected: false,
						id: 1,
						sorting: 0, // 价格排序： 1从低到高，不等于1则从高到低
						value: "fSalePrice",
					},
					{
						title: "上架",
						isSelected: false,
						id: 2,
						value: "sj",
					},
					{
						title: "时间",
						isSelected: false,
						id: 3,
						value: "shijian",
					}
				],
				PriceSorting: 0, // 价格排序，1 从低到高，2 从高到低 
				keywords: "", // 更多搜索
				areaId: '',
				ACTIVETYPE: '', // 活动type
				ACTIVEID: '', // 活动ID
				totalPage: 0, // 商品数量
				pageIndex: 1, // 分页索引
				pageSize: 20,
				ActiveMoreList: [], // 更多列表
				FavorList: [], // 关注列表（查询该商品是否被关注）
				ACTIVE_STATUS: 0, // 是否团购 0 非团购,1 团购
				timeList: [],
				currentTime: new Date().getHours(),
				currentItem: {
					goodsList: []
				},
				thistime: new Date(),
				go: true
			};
		},
		computed: {
			// 商品时间与顶部时间做对比进行分组
			// myfilter() {
			// 	return function(pEndDate, TabActiveHoursData) {
			// 		let timearr = pEndDate.replace(" ", ":").replace(/\:/g, "-").split("-");
			// 		let timestr = timearr[3]
			// 		return Number(timestr) === TabActiveHoursData;
			// 	}
			// },
			// 将商品时间与系统时间进行比较
			// ToCompare() {
			// 	return function(SystemData, pEndDate) {
			// 		let timearr = pEndDate.replace(" ", ":").replace(/\:/g, "-").split("-");
			// 		let timestr = timearr[3]
			// 		return Number(timestr) === SystemData
			// 	}
			// },
			// 团购当前时间
			NowData() {
				return function(NowDate) {
					let timearr = NowDate.replace(" ", ":").replace(/\:/g, "-").split("-");
					let timestr = timearr[3]
					return Number(timestr)
				}
			},
			// 团购结束时间
			endTimeData() {
				return function(endTimeData) {
					let timearr = endTimeData.replace(" ", ":").replace(/\:/g, "-").split("-");
					let timestr = timearr[3]
					return Number(timestr)
				}
			}
		},
		mounted() {
			this.GetShopActiveData() //  获取活动楼层
		},
		methods: {
			// 获取当前系统时间(时分)
			GetSystemData() {
				let aData = new Date()
				this.SystemData = aData.getHours()
				this.TabActiveHoursData = aData.getHours()

				switch (this.SystemData) {
					case 10:
						this.Active = 1
						this.TriangleActive = 1
						break;
					case 11:
						this.Active = 2
						this.TriangleActive = 2
						break;
					case 12:
						this.Active = 3
						this.TriangleActive = 3
						break;
					case 13:
						this.Active = 4
						this.TriangleActive = 4
						break;
					case 14:
						this.Active = 5
						this.TriangleActive = 5
						break;
					case 15:
						this.Active = 6
						this.TriangleActive = 6
						break;
					case 16:
						this.Active = 7
						this.TriangleActive = 7
						break;
				}
			},
			// 刷新组件
			UpList() {
				console.log('我触发了')
				this.ActiveList = [] // 活动列表
				this.Active = 1
				this.TriangleActive = 1
				this.OtherActiveList = [] // 其他活动列表
				this.activityList = []
				this.ACTIVITYFLOORSTATUS = 1
				if (this.ACTIVITYFLOORSTATUS === 1) {
					this.$emit('TabStatus', true)
				} else {
					this.$emit('TabStatus', false)
				}
				this.GetShopActiveData() //  获取活动楼层
				this.GetSystemData() // 获取当前系统时间(时分)
			},
			// 页面切换
			TabStatus(TabStatus) {
				console.log('页面切换', TabStatus)
				this.ACTIVITYFLOORSTATUS = 2
				if (this.ACTIVITYFLOORSTATUS === 1) {
					this.$emit('TabStatus', true)
				} else {
					this.$emit('TabStatus', false)
					// this.TabActiveTme(1, 10) //将时间恢复初始
				}
				this.GetSystemData() // 获取当前系统时间(时分)
				this.getsrc(TabStatus)
				this.getActives()
			},
			getsrc(a) {
				var arr = []
				var re = /src="([^"]*)"/g;

				console.log(a.cDescription)
				if (a.cDescription != undefined) {
					while (arr = re.exec(a.cDescription)) {
						this.banner = arr[1]
					}
				} else {
					this.banner = '../../assets/img/flebanner_03.png'
				}
			},
			loadData(item) {
				let orders = [{
					fieldname: "iOrder",
					direction: "asc"
				}]

				this.$api.commit.getProductList({
					token: localStorage.getItem("token"),
					queryCondition: {

						order: orders,
						pageindex: 1,
						pagesize: 100,
						where: [{
							fieldname: "promotionActivityId",
							valuefrom: "PP" + (item.id)
						}, {
							fieldname: "shop_id",
							valuefrom: `${this.shopid}`
						}, {
							fieldname: "timeCondition",
							valuefrom: 4
						}]
					},
				}).then(res => {
					if (res.code == 200) {
						item.goodsList = res.data.data
						if (this.currentTime == item.pStartDate) {
							this.currentItem = item
						}
					}
				})
			},
			getNowFormatDate() {
				var date = new Date();
				var seperator1 = "-";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = year + seperator1 + month + seperator1 + strDate;
				return currentdate;
			},
			getActives() {
				this.timeList = []

				this.$api.commit.getPricePreferentialList({
						data: {
							type: 1,
							iShopId: this.shopid,
							activeStartDate: this.getNowFormatDate() + ' 00:00:00',
							// startDate: this.getNowFormatDate()+' 00:00:00',
							// endDate: this.getNowFormatDate()+' 23:59:59'
							activeEndDate: this.getNowFormatDate() + ' 23:59:59'
						}
					}

				).then(res => {
					if (res.code == 200) {
						this.activityList = res.data.data
						this.activityList.sort((a, b) => {
							return (new Date(a.pStartDate)).getHours() - (new Date(b.pStartDate))
							.getHours()
						})
						if (this.activityList.length > 0) {
							this.activityList.forEach(item => {
								let time = new Date().getHours()

								let pStartDate = (new Date(item.pStartDate)).getHours()
								let pEndDate = (new Date(item.pEndDate)).getHours()
								let status = ''
								if (time >= pStartDate && time < pEndDate) {
									status = "已开抢"
									// this.timeDown()

								}
								if (time >= pEndDate) {
									status = "已结束"
								}
								if (time < pStartDate) {
									status = "即将开始"
								}
								this.timeList.push({
									id: item.id,
									status: status,
									pStartDate: pStartDate,
									pEndDate: pEndDate,
									goodsList: []
								})
							})

							this.timeList.forEach(item => {
								this.loadData(item)

							})
						}

					}
				})


			},
			// 获取其他活动
			getActive(getActive) {
				let that = this
				let params = {
					data: {
						iShopId: that.shopid,
						type: getActive
					}
				}

				// if(getActive == 1){
				// 	this.getActives()
				// }else{
				that.$api.commit.getPricePreferentialList(params).then(res => {
					if (res.data.data.length > 0) {
						res.data.data.forEach(item => {
							that.$set(item, "type", getActive)
							that.activityList.push(item)
						})
						that.activityList.forEach(element => {
							let type = ''
							if (element.type === 1) {
								type = 'PP' // 秒杀
							} else if (element.type === 2) {
								type = 'GB' // 团购
							} else if (element.type === 3) {
								type = 'GP' // 买赠
							} else if (element.type === 4) {
								type = 'PP' // 商品促销
							} else if (element.type === 5) {
								type = 'TP' // 整单促销
							} else if (element.type === 6) {
								type = 'CP' // 搭配套餐
							} else if (element.type === 7) {
								type = 'CP' // 固定套餐
							} else if (element.type === 8) {
								type = 'CP' // 关联营销
							} else if (element.type === 10) {
								type = 'GP' // 加价购
							} else if (element.type === 11) {
								type = 'HP' // 积分换购
							} else if (element.type === 12) {
								type = 'TP' // N件购
							} else if (element.type === 13) {
								type = 'AB' // N件购
							} else if (element.type === 14) {
								type = 'CP' // N件购
							}
							let data = {
								token: localStorage.getItem("token"),
								queryCondition: {
									order: [{
										fieldname: "iOrder",
										direction: "asc",
									}, ],
									pageindex: 1,
									pagesize: 1000,
									where: [{
											fieldname: "promotionActivityId",
											valuefrom: `${type}${element.id}`
										},
										{
											fieldname: "shop_id",
											valuefrom: `${that.shopid}`
										}
									],
								},
							}
							that.$api.commit.getProductList(data).then(res => {
								if (typeof(res.data) == "undefined") {
									that.$set(element, "SmallList", [])
									that.$set(element, "count", 0)

								} else {
									that.$set(element, "SmallList", res.data.data)
									that.$set(element, "count", Math.ceil(res.data.data.length /
										4))
								}
								that.OtherActiveList = res.data.data
							})
						})
					}
				})
				// }

			},
			// 获取其他活动下的详情
			getGoods(element) {
				let active_type = ''
				if (element.type === 1) {
					active_type = 'PP' // 秒杀
				} else if (element.type === 2) {
					active_type = 'GB' // 团购
				} else if (element.type === 3) {
					active_type = 'GP' // 买赠
				} else if (element.type === 4) {
					active_type = 'PP' // 商品促销
				} else if (element.type === 5) {
					active_type = 'TP' // 整单促销
				} else if (element.type === 6) {
					active_type = 'CP' // 搭配套餐
				} else if (element.type === 7) {
					active_type = 'CP' // 固定套餐
				} else if (element.type === 8) {
					active_type = 'CP' // 关联营销
				} else if (element.type === 10) {
					active_type = 'GP' // 加价购
				} else if (element.type === 11) {
					active_type = 'HP' // 积分换购
				} else if (element.type === 12) {
					active_type = 'TP' // N件购
				} else if (element.type === 13) {
					active_type = 'AB' // N件购
				} else if (element.type === 14) {
					active_type = 'CP' // N件购
				}
				let data = {
					token: localStorage.getItem("token"),
					queryCondition: {
						order: [{
							fieldname: "iOrder",
							direction: "asc",
						}, ],
						pageindex: 1,
						pagesize: 1000,
						where: [{
								fieldname: "promotionActivityId",
								valuefrom: `${active_type}${element.id}`
							},
							{
								fieldname: "shop_id",
								valuefrom: `${this.shopid}`
							}
						],
					},
				}
				this.$api.commit.getProductList(data).then(res => {
					this.$set(element, "count", Math.ceil(res.data.data.length / 4));
					console.log('商品详情', res.data.data)
				})
			},
			// 获取活动楼层
			GetShopActiveData() {
				let params = {
					limit: 1000,
					page: 1,
					shop_id: this.shopid
				}
				this.$api.commit.GetShopActive(params).then((res) => {
					res.data.data.forEach(element => {
						let active_type = ''
						if (element.type === 1) {
							active_type = 'PP' // 秒杀
						} else if (element.type === 2) {
							active_type = 'GB' // 团购
						} else if (element.type === 3) {
							active_type = 'GP' // 买赠
						} else if (element.type === 4) {
							active_type = 'PP' // 商品促销
						} else if (element.type === 5) {
							active_type = 'TP' // 整单促销
						} else if (element.type === 6) {
							active_type = 'CP' // 搭配套餐
						} else if (element.type === 7) {
							active_type = 'CP' // 固定套餐
						} else if (element.type === 8) {
							active_type = 'CP' // 关联营销
						} else if (element.type === 10) {
							active_type = 'GP' // 加价购
						} else if (element.type === 11) {
							active_type = 'HP' // 积分换购
						} else if (element.type === 12) {
							active_type = 'TP' // N件购
						} else if (element.type === 13) {
							active_type = 'AB' // N件购
						} else if (element.type === 14) {
							active_type = 'CP' // 选配
						}
						let paramsData = {
							token: localStorage.getItem("token"),
							queryCondition: {
								order: [{
									fieldname: "iOrder",
									direction: "asc",
								}, ],
								pageindex: 1,
								pagesize: 1000,
								where: [{
										fieldname: "promotionActivityId",
										valuefrom: `${active_type}${element.active_id}`
									},
									{
										fieldname: "shop_id",
										valuefrom: `${element.shop_id}`
									}
								],
							},
						}
						this.$api.commit.getProductList(paramsData).then(res => {
							this.$set(element, "SmallList", res.data.data);
						})
					});
					// 获取其他活动
					for (var i = 1; i < 15; i++) {
						this.getActive(i)
					}
					this.ActiveList = res.data.data
					this.GetSystemData() // 获取当前系统时间(时分)
				})
			},
			//跳转商品详情
			goDetail(item, type) {
				console.log('item', item, type)
				this.$router.push({
					path: "/fruit/detail",
					query: {
						id: item.pid,
						iShopId: item.iShopId, // 店铺id
					},
				});
			},
			// 时间切换
			TabActiveTme(item) {
				// this.GetSystemData() // 获取当前系统时间(时分)
				// console.log('时间切换', TabActiveTme, TabActiveHours)
				// this.Active = TabActiveTme
				// this.TriangleActive = TabActiveTme
				// this.TabActiveHoursData = TabActiveHours
				console.log(item.pStartDate)
				this.currentTime = item.pStartDate
				this.currentItem = item
				if (this.currentTime != (new Date().getHours())) {
					this.go = false
				} else {
					this.go = true
				}

			},
			// 立即抢购
			SnappedImmediately(AddCar) {
				console.log('加入购物车', AddCar)
				if(this.go){
					this.$router.push({
						path: "/fruit/detail",
						query: {
							id: AddCar.pid,
							iShopId: AddCar.iShopId, // 店铺id
						},
					});
				}
				
				// 获取商品详情
				// let params = {
				// 	token: localStorage.getItem('token'),
				// 	data: {
				// 		id: AddCar.pid
				// 	}
				// }
				// this.$api.good.getGoodDetail(params).then(res => {
				// 	console.log('通过商品详情查询', res.data)
				// 	if (res.code === 200) {
				// 		let AddCarData = {
				// 			token: localStorage.getItem("token"),
				// 			data: [{
				// 				iSKUId: res.data.lsProductSkus[0].id,
				// 				iProductId: AddCar.pid,
				// 				onLineOffLine: 0,
				// 				iQuantity: 1,
				// 				dlyType: "EMS",
				// 			}]
				// 		}
				// 		console.log("AddCarData", AddCarData);
				// 		this.$api.good.addCarts(AddCarData).then((res) => {
				// 			console.log("addCarts", res);
				// 			if (res.code == 200) {
				// 				this.$message.success(res.message);
				// 			} else {
				// 				this.$message.error(res.message);
				// 			}
				// 		})
				// 	} else {
				// 		return false
				// 	}
				// })
				
			},
			// 立即抢购失效
			SnappedImmediatelyUN() {
				console.log('立即抢购失效')
			},
			// 更多
			toList(shopId, type, activeid) {
				console.log('更多', shopId, type, activeid)
				this.ACTIVETYPE = type
				this.ACTIVITYFLOORSTATUS = 3
				this.ACTIVEID = activeid
				this.GetActiveMoreApi(shopId, type, this.areaData[0].value, 'asc')
				this.$emit('TabStatus', false)
			},
			// 更多搜索
			searchThis() {
				console.log('更多搜索', this.keywords)
				this.GetActiveMoreApi(this.shopid, this.ACTIVETYPE, this.areaId, this.PriceSorting, this.keywords)
			},
			// 排序方式
			checkArea(item) {
				this.areaData.forEach((items) => {
					items.isSelected = false;
					if (items.id == item.id) {
						this.areaId = item.value;
						this.$set(items, "isSelected", true);
						if (items.title === '价格') {
							// 价格排序
							if (items.sorting === 0) {
								items.sorting = 1
							} else if (items.sorting === 1) {
								items.sorting = 2
							} else if (items.sorting === 2) {
								items.sorting = 1
							}
							this.PriceSorting = items.sorting // 价格排序，1 从低到高，2 从高到低
							console.log('111', this.areaId, this.PriceSorting)
							this.GetActiveMoreApi(this.shopid, this.ACTIVETYPE, this.areaId, this.PriceSorting,
								this.keywords)
						} else {
							this.PriceSorting = 0
							console.log('222', this.areaId, this.PriceSorting)
							this.GetActiveMoreApi(this.shopid, this.ACTIVETYPE, this.areaId, this.PriceSorting,
								this.keywords)
						}
					}
				})
			},
			// 分页获取当前页
			handleCurrentChange(val) {
				console.log("分页获取当前页", val);
				this.pageIndex = val;
				this.GetActiveMoreApi(this.shopid, this.ACTIVETYPE, this.areaId, this.PriceSorting, this.keywords)
			},
			// 获取活动中更多商品
			/**
			 * fieldname: ''// 排序方式 iOrder 默认, fSalePrice 价格
			 * direction: ''// asc // 升序 desc 降序
			 * shopId: '', 店铺id
			 * type: '', 活动板块type
			 * keywords: '', // 搜索关键字
			 * 
			 */
			GetActiveMoreApi(shopId, type, fieldname, direction, keywords) {
				let orders = [] // 排序
				let active_type = '' // 活动类型
				// console.log('获取活动中更多商品', shopId, type, fieldname, direction)
				if (fieldname === 'iOrder') {
					let ord = {
						//综合排序
						fieldname: fieldname,
						direction: "asc"
					}
					orders.push(ord)
				} else if (fieldname === 'fSalePrice') {
					if (direction === 1) {
						let ord = {
							//价格升序
							fieldname: fieldname,
							direction: "asc"
						}
						orders.push(ord)
					} else if (direction === 2) {
						let ord = {
							//价格升序
							fieldname: fieldname,
							direction: "desc"
						}
						orders.push(ord)
					}
				}

				if (type === 1) {
					active_type = 'PP' // 秒杀
				} else if (type === 2) {
					active_type = 'GB' // 团购
				} else if (type === 3) {
					active_type = 'GP' // 买赠
				} else if (type === 4) {
					active_type = 'PP' // 商品促销
				} else if (type === 5) {
					active_type = 'TP' // 整单促销
				} else if (type === 6) {
					active_type = 'CP' // 搭配套餐
				} else if (type === 7) {
					active_type = 'CP' // 固定套餐
				} else if (type === 8) {
					active_type = 'CP' // 关联营销
				} else if (type === 10) {
					active_type = 'GP' // 加价购
				} else if (type === 11) {
					active_type = 'HP' // 积分换购
				} else if (type === 12) {
					active_type = 'TP' // N件购
				} else if (type === 13) {
					active_type = 'AB' // N件购
				} else if (type === 14) {
					type = 'CP' // 选配
				}
				let params = {
					queryCondition: {
						order: orders, // 排序方式
						pageindex: this.pageIndex,
						pageSize: this.pageSize,
						where: [{
								fieldname: "keyword", // 商品id
								valuefrom: keywords,
							},
							{
								fieldname: "promotionActivityId", // 活动id
								valuefrom: `${active_type}${this.ACTIVEID}`,
							},
							{
								fieldname: "shop_id", //店铺id
								valuefrom: shopId,
							}
						],
					},
				}
				this.$api.commit.GetProductList(params).then(res => {
					// console.log('获取活动中更多商品', res)
					if (type === 2) {
						console.log('我是团购')
						this.ACTIVE_STATUS = 1
						this.ActiveMoreList = res.data.data
						this.totalPage = res.data.totalPage;
						this.GetActivityGroupBuyingFun(res.data.data)
						this.getProductFavorites()
					} else {
						console.log('我是非团购')
						this.ACTIVE_STATUS = 0
						this.ActiveMoreList = res.data.data
						this.totalPage = res.data.totalPage;
						this.getProductFavorites()
					}
				})
			},
			// 获取团购活动商品详情
			GetActivityGroupBuyingFun(ListData) {
				ListData.forEach(element => {
					let params = {
						token: localStorage.getItem('token'),
						data: {
							id: element.pid,
							iShopId: element.iShopId
						}
					}
					this.$api.good.getGoodDetail(params).then(res => {
						this.$set(element, 'GroupBuying', res.data)
						this.ActiveMoreList = ListData
						console.log('获取团购活动商品详情', this.ActiveMoreList)
					})
				})

			},
			// 获取个人收藏列表
			getProductFavorites() {
				let params = {
					token: localStorage.getItem('token'),
					data: {
						classId: '',
						productName: '',
						tagId: '',
						currentPage: this.pageIndex,
						pagesize: this.pageSize,
					}
				}
				this.$api.person.getProductFavorites(params).then(res => {
					if (res.code == 200) {
						this.FavorList = res.data.pager.data
						console.log('获取个人收藏列表', this.FavorList)
						this.SearchFavorites()
					}

				})
			},
			// 查询该商品是否被关注
			/**
			 * FavorList 关注列表
			 * LikeList 商品信息列表
			 */
			SearchFavorites() {
				let that = this
				console.log('获取个人收藏列表FavorList', that.FavorList, '获取团购活动商品详情', that.ActiveMoreList, this.ACTIVETYPE)
				that.ActiveMoreList.forEach(element => {
					let results = that.FavorList.map(a => a.pid).indexOf(element.pid)
					if (results === -1) {
						that.$set(element, 'FocusStatus', false)
					} else {
						that.$set(element, 'FocusStatus', true)
					}
				})
			},
			// 关注
			focus(focus) {
				console.log('关注', focus, this.ACTIVETYPE)
				if (focus.FocusStatus) {
					let del = {
						token: localStorage.getItem('token'),
						data: {
							productId: focus.pid
						}
					}
					this.$api.good.delFavoritesByProductId(del).then(res => {
						if (res.code == 200) {
							this.GetActiveMoreApi(this.shopid, this.ACTIVETYPE, this.areaId, this.PriceSorting,
								this.keywords)
							this.$message.success(res.message);
						} else {
							this.$message.error(res.message);
						}
					});
				} else {
					let params = {
						token: localStorage.getItem('token'),
						data: {
							iShopIds: focus.iShopId,
							ids: focus.pid
						}
					}
					this.$api.good.addToCollect(params).then(res => {
						if (res.code == 200) {
							this.GetActiveMoreApi(this.shopid, this.ACTIVETYPE, this.areaId, this.PriceSorting,
								this.keywords)
							this.$message.success(res.message);
						} else {
							this.$message.error(res.message);
						}
					})
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	.bigbox {
		margin-bottom: .25rem;

		.more {
			height: 2.5rem;
			background: rgba(0, 0, 0, 1);
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 0 1.44rem;
			margin-top: 1.25rem;

			img {
				width: 7.38rem;
				cursor: pointer;
			}
		}
	}

	#Fresh {
		padding: 0 16.19rem;
		margin-top: 2.19rem;
		display: flex;
		flex-direction: column;

		.top-one {
			width: 100%;

			img {
				width: 100%;
			}
		}

		.title_or_time_box {
			display: flex;
			align-items: center;

			.title {
				width: 11.25rem;
				height: 3.44rem;
				background: rgba(0, 0, 0, 1);
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 1.5rem;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(234, 234, 234, 1);
			}

			.time {
				margin-left: 1rem;
			}
		}

		.top-other {
			margin-top: 1.25rem;
			margin-bottom: 1.25rem;

			.el-carousel__item {
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.goods-item {
					// width: 20.94rem;
					height: 100%;
					background: #fff;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					position: relative;
					margin-right: 2.38rem;
					cursor: pointer;

					&:nth-child(4n) {
						margin-right: 0;
					}

					.goods-img {
						width: 15rem;
						height: 15rem;
						object-fit: contain;
					}

					.goods-info {
						display: flex;
						flex-direction: column;
						text-align: center;
						padding: 0 1rem;

						.name {
							font-size: 1.13rem;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: rgba(4, 0, 0, 1);
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 18rem;
						}

						.price {
							font-size: 1.5rem;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: rgba(243, 64, 111, 1);
							margin-top: 0.94rem;
						}

						.promotion {
							font-size: .8rem;
							display: flex;
							width: 2rem;
							padding: .2rem 1rem;
							color: rgba(243, 64, 111, 1);
							align-items: center;
							border-radius: 1rem;
							margin-top: 1rem;
							border: 1px solid rgba(243, 64, 111, 1);
						}
					}
				}
			}
		}
	}

	#ActivtyList {
		position: relative;

		.top_box {
			width: 100%;
			height: 6.25rem;
			background-color: rgba(0, 0, 0, 0.75);
			position: absolute;
			bottom: 0rem;
			// margin-bottom: -6rem;
			z-index: 99;

			.top_tab_box {
				// padding: 0 16.19rem;
				height: 6.25rem;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.top_tab_box_item {
					display: flex;
					height: 6.25rem;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					cursor: pointer;
					width: 20%;

					span {
						display: flex;
						height: 1.5rem;
						align-items: center;
					}


					.triangle_box {
						// padding: 0 16.19rem;
						display: flex;
						justify-content: space-between;
						position: absolute;
						bottom: -1.5rem;
						.triangle_box_item {
							display: flex;
							align-items: center;
							justify-items: center;
							width: 20%;

							.triangle_item {
								margin: 0 auto;
								border: .8rem solid;
								border-color: transparent transparent transparent transparent;
								width: 0;
								height: 0;
							}

							.triangleactive {
								border-color: #f3406f transparent transparent transparent;
							}
						}

					}
				}

				.itemactive {
					background: #f3406f;
				}


			}
		}



		.list_body {
			padding: 0 16.19rem;

			.floor_box_img {
				height: 100%;
				// margin: 0 auto;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 1.5rem;
				position: relative;


			}

			.list_box {
				display: flex;
				flex-flow: row wrap;
				align-items: center;

				.list_box_item {
					
					.list_box_list {
						width: 21rem;
						height: 29.5rem;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						margin: 0 1rem 1rem 0;
						background: #fff;
						cursor: pointer;
						&.nodrop{
							cursor: no-drop;
						}
						.goods-img {
							width: 15rem;
							height: 15rem;
							object-fit: contain;
						}

						.goods_info_box {
							display: flex;
							align-items: center;
							justify-content: center;
							flex-direction: column;
							width: 100%;
							.goods_info_title {
								font-size: 1.13rem;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(4, 0, 0, 1);
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								// display: flex;
								height: 3rem;
								// align-items: center;
								width: 90%;
								margin-top: 1rem;
							}

							.goods_info_inventory {
								display: flex;
								height: 3rem;
								align-items: center;
								justify-content: space-between;

								.inventory {
									border-radius: 1rem;
									border: 1px solid #4dc2b1;
									height: .5rem;
									width: 12rem;
								}

								.right {
									font-size: .8rem;
									margin-left: .5rem;
								}

								.active {
									background: #4dc2b1;
									height: .5rem;
								}
							}

							.goods_info_price {
								font-size: 1.5rem;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(243, 64, 111, 1);
								display: flex;
								height: 3rem;
								align-items: center;

								span {
									font-size: 1rem;
									color: #5cbdaf;
									margin-top: .5rem;
								}

								.yj {
									color: #959595;
									margin-left: .5rem;
									text-decoration: line-through
								}
							}

							.goods_info_buttons {
								display: flex;
								height: 3rem;
								align-items: center;

								span {
									color: #fff;
									background: #f3406f;
									border-radius: 1rem;
									font-size: 1rem;
									padding: .5rem 1rem;
									cursor: pointer;
									&.gray{
										background-color: #999;
										cursor: no-drop;
									}
								}
								
									
								
							}

							.goods_info_buttons_un {
								display: flex;
								height: 3rem;
								align-items: center;

								span {
									color: #fff;
									background: #959595;
									border-radius: 1rem;
									font-size: 1rem;
									padding: .5rem 1rem;
									cursor: no-drop;
								}
							}
						}
					}
				}

				.list_box_item:nth-child(4n) {
					margin: 0 0 1rem 0;
				}
			}
		}
	}

	#OtherActive {
		padding: 0 16.19rem;

		.top_box {
			display: flex;
			height: 5rem;
			align-items: center;
			justify-content: space-between;

			.sortList {
				display: flex;

				div {
					display: flex;
					cursor: pointer;
					padding: 0 1rem;

					.areaIconbox {
						padding: 0;
					}

					&.active {
						color: #08c19d;
					}
				}
			}

			.search {
				float: right;
				width: 20.94rem;
				height: 2rem;
				border-bottom: 0.06rem solid #b6b6b6;
				position: relative;

				input {
					width: 18rem;
					height: 2rem;
					outline: none;
					border: none;
					font-size: 0.88rem;
					color: #acacac;
					background: #eaeaea;
					;
				}

				img {
					cursor: pointer;
					position: absolute;
					right: 1rem;
					top: 0.4rem;
					z-index: 10;
					width: 1.25rem;
					height: 1.25rem;
				}
			}
		}

		.goods-list {
			margin-top: 1.88rem;
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;

			.goods-item {
				width: 18rem;
				height: 25.88rem;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-left: 2.38rem;
				margin-bottom: 2.38rem;
				cursor: pointer;
				background: #fff;
				padding: 1rem;

				&:first-child {
					margin-left: 0;
				}

				&:nth-child(5n) {
					margin-left: 0;
				}

				.goods-img {
					width: 100%;
					height: 20.94rem;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #fff;

					img {
						width: 16rem;
						height: 16rem;
						object-fit: contain;
					}
				}

				.goods-img_2 {
					width: 100%;
					// height: 20.94rem;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #fff;

					img {
						width: 16rem;
						// height: 16rem;
						object-fit: contain;
					}
				}

				.goods-info {
					width: 100%;
					margin-top: 1.5rem;
					height: 6rem;
					display: flex;
					justify-content: space-between;
					align-content: center;

					.goods-info-left {
						display: flex;
						flex-direction: column;
						width: 80%;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;

						.name {
							font-size: 1.13rem;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: rgba(0, 0, 0, 1);
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 100%;
							display: flex;
							align-items: center;
							height: 3rem;
						}

						.price_box {
							display: flex;
							align-items: center;
							height: 3rem;

							.price {
								font-size: 1.5rem;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(243, 64, 111, 1);
							}

							.text {
								font-size: .8rem;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: #666;
								margin-left: 1rem;
								margin-top: .7rem;
							}
						}
					}

					.goods-info-right {
						display: flex;
						align-items: center;
						justify-content: center;

						.item_img {
							width: 1.5rem;
							height: 1.4rem;
						}
					}
				}
			}

			.goods-item_2 {
				width: 18rem;
				height: 25.88rem;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-left: 2.38rem;
				margin-bottom: 2.38rem;
				cursor: pointer;
				background: #fff;
				padding: 1rem;

				&:first-child {
					margin-left: 0;
				}

				&:nth-child(5n) {
					margin-left: 0;
				}

				.goods-img_2 {
					width: 100%;
					// height: 20.94rem;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #fff;
					margin: 1rem;

					img {
						width: 16rem;
						// height: 16rem;
						object-fit: contain;
					}
				}

				.tip_box {
					height: 4rem;
					display: flex;
					width: 100%;
					align-items: center;
					margin-top: 2.5rem;

					.tip_body {
						padding: 1rem;
						color: #fff;
						width: 100%;
						font-size: 1rem;
						display: flex;
						align-items: center;
						justify-content: space-between;

						& span {
							display: flex;
							align-items: center;
							height: 1.4rem;
						}

						.letf {
							display: flex;
							flex-direction: column;
						}
					}
				}

				.goods-info {
					width: 90%;
					height: 6rem;
					display: flex;
					justify-content: space-between;
					align-content: center;

					.goods-info-left {
						display: flex;
						flex-direction: column;
						width: 80%;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;

						.name {
							font-size: 1.13rem;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: rgba(0, 0, 0, 1);
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 100%;
							display: flex;
							align-items: center;
							height: 3rem;
						}

						.price_box {
							display: flex;
							align-items: center;
							height: 3rem;

							.price {
								font-size: 1.5rem;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(243, 64, 111, 1);
							}

							.text {
								font-size: .8rem;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: #666;
								margin-left: 1rem;
								margin-top: .7rem;
							}
						}
					}

					.goods-info-right {
						display: flex;
						align-items: center;
						justify-content: center;

						.item_img {
							width: 1.5rem;
							height: 1.4rem;
						}
					}
				}
			}
		}

		.pagination_box {
			padding: 0 2.62rem;
			display: flex;
			justify-content: center;
			height: 3rem;
			align-items: center;
		}
	}
</style>
<style>
	.pagination_box .el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: rgba(17, 17, 17, 1);
		color: #fff;
	}

	.pagination_box .el-pagination.is-background .el-pager li:hover {
		color: rgba(17, 17, 17, 1);
	}
</style>
